<template>
	<view class="page doctor_details_page">
		<view class="doctor_info">
			<view class="info_avatar">
				<image :src="doctorDetail.avatar" mode="aspectFill"></image>
			</view>
			<view class="info_text">
				<view class="doctor_info_self">
					<view class="text_name">
						{{doctorDetail.name || ''}}
					</view>
					<view>
						{{doctorDetail.titleName || ''}}
					</view>
					<view>
						{{doctorDetail.departName || ''}}
					</view>
				</view>
				<view class="doctor_info_hospitoal">
					<view class="info_tips green">
						{{doctorDetail.levelName || ''}}
					</view>
					<view>
						{{doctorDetail.hospitalName || ''}}
					</view>
				</view>
			</view>
			<view class="info_star btns" @click="insertMyFollow" v-if="type != 'reservation'&&doctorDetail.followStatus">
				<view class="icon">
					<image src="@/static/icon/doctor/love-icon.png" mode="widthFix" v-if="doctorDetail.followStatus == 0"></image>
					<image src="@/static/icon/doctor/love-fill-icon.png" mode="widthFix" v-if="doctorDetail.followStatus == 1">
					</image>
				</view>
				<view>
					{{ doctorDetail.followStatus == 1? '已关注' : '关注'}}
				</view>
			</view>
			<view class="info_star btns" v-if="type == 'reservation'">
				<picker mode="date" :start="$dayjs().format('YYYY-MM-DD')" :end="$dayjs().add(14, 'day').format('YYYY-MM-DD')"
					@change="dateChange">
					预约
				</picker>
			</view>
		</view>
		<view class="doctor_capacity  ellipsis-2">
			<text class="text">擅长: </text>
			<text class="content">{{doctorDetail.proficient || ''}}</text>
			<view class="more" @click="moreDetailsShow">查看详情
			</view>
		</view>
		<view class="card doctor_contact">
			<view class="type_list" v-if="type != 'reservation'">
				<view class="type" :class="{'active':chooseTab.value == item.value}" v-for="item in typeTabs" :key="item.value"
					@click="getTab(item)">
					{{item.name}}
				</view>
			</view>
			<view class="doctor_total">
				<view class="total_item">
					<text class="text">
						好评率
					</text>
					<text class="total">
						{{doctorDetail.favorableCount || 0}}%
					</text>
				</view>
				<view class="total_item">
					<text class="text">
						接诊量
					</text>
					<text class="total">
						{{doctorDetail.treatmentCount || 0}}
					</text>
				</view>
				<view class="total_item">
					<text class="text">
						回复
					</text>
					<text class="total">
						{{doctorDetail.replySpeed || ''}}
					</text>
				</view>
			</view>
			<view class="contact_list">
				<template v-if="type != 'reservation'">
					<view class="contact_item "
						:class="{ordinary:chooseTab.value==1,expert:chooseTab.value==2,active:chooseItem == item.name}"
						v-for="item in doctorService" :key="item.name" v-if="item.open == 1" @click="gotoManagementList(item)">
						<view class="icon">
							<image :src="item.icon" mode="widthFix"></image>
						</view>
						<view class="title">
							{{item.name == 'Text' ? '图文问诊' : item.name == 'Speech' ? '语音问诊' : item.name == 'Video' ? '视频问诊' : 0}}
						</view>
						<view class="price">
							￥{{item.amount}}
						</view>
					</view>
				</template>
				<view class="contact_item" :class="{active:chooseService == 'reservation' }" v-if="type == 'reservation'">
					<view class="icon">
						<image src="@/static/icon/doctor/reservation-icon.png" mode="widthFix"></image>
					</view>
					<view class="title">
						<picker mode="date" :start="$dayjs().format('YYYY-MM-DD')"
							:end="$dayjs().add(14, 'day').format('YYYY-MM-DD')" @change="dateChange">
							预约问诊
						</picker>
					</view>
					<view class="price">
						有号
					</view>
				</view>
			</view>
			<view class="contact_tips" v-if="doctorDetail.doctorSettingVo">
				<view class="tips_title">
					服务说明
				</view>
				<view class="tips_list">
					<view class="tips_item">
						对此医生的图文问诊有效期两天
					</view>
					<view class="tips_item">
						有效期内对医生图文问诊次数不限
					</view>
				</view>
			</view>
		</view>
		<view class="card doctor_team" v-if="type != 'reservation'">
			<view class="card_title">
				他的团队
			</view>
			<view class="team_list">
				<view class="team_item" v-for="(item,index) in doctorDetail.doctorTeamManagementList" :key="index">
					<view class="item_avatar">
						<image :src="item.avatar" mode="aspectFill"></image>
					</view>
					<view class="item_title ellipsis-1">
						{{item.name}}
					</view>
					<view class="item_subtitle ellipsis-1">
						{{item.titleName || ''}}
					</view>
				</view>
			</view>
		</view>
		<view class="card doctor_evaluate" v-if="type != 'reservation'">
			<view class="title">
				<view class="text">
					患者评价
				</view>
				<view class="more" @click="gotoPage('/pagesCommon/doctor/evaluate')">
					查看全部
					<uni-icons class="icon" type="right" size="12" color="#999"></uni-icons>
				</view>
			</view>
			<view class="evaluate_type" @click="gotoPage('/pagesCommon/doctor/evaluate')">
				<view class="evaluate_type_item">
					全部{{doctorDetail.favorableCount+doctorDetail.midEvaluationCount+doctorDetail.negativeReviewsCount}}
				</view>
				<view class="evaluate_type_item">
					好评{{doctorDetail.favorableCount || ''}}
				</view>
				<view class="evaluate_type_item">
					中评{{doctorDetail.midEvaluationCount || ''}}
				</view>
				<view class="evaluate_type_item">
					差评{{doctorDetail.negativeReviewsCount || ''}}
				</view>
			</view>
			<view class="evaluate_list">
				<evaluateItem v-for="(item,index) in doctorDetail.patientCommentList" :key="index" :item="item"></evaluateItem>
			</view>
		</view>
		<view class="btns" @click="moreServiceShow" v-if="type != 'reservation'">
			申请服务
		</view>
		<uni-popup ref="moreDetails" type="bottom" :showClose="true" borderRadius="10px 10px 0 0">
			<view class="container">
				<uni-icons class="close_icon" type="closeempty" size="24" color="#999" @click="moreDetailsClose"></uni-icons>
				<view class="content">
					<view class="popup_title">
						医生介绍
					</view>
					<view class="details_item">
						<view class="item_title">
							擅长
						</view>
						<view class="item_content">
							{{doctorDetail.proficient || ''}}
						</view>
					</view>
					<view class="details_item">
						<view class="item_title">
							简介
						</view>
						<view class="item_content">
							{{doctorDetail.introduction || ''}}
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="moreService" type="bottom" :showClose="true" borderRadius="10px 10px 0 0">
			<view class="container background_linear_gradient">
				<uni-icons class="close_icon" type="closeempty" size="24" color="#999" @click="moreServiceClose"></uni-icons>
				<view class="content">
					<view class="popup_title">
						申请服务
					</view>
					<view class="doctor_info">
						医生累计接诊患者 <text class="blue"> {{doctorDetail.treatmentCount || 0}}</text>人 满意度
						<text class="blue">{{doctorDetail.favorableCount || 0}}%</text>
					</view>
					<view class="more_service_item" :class="{active: chooseItem == 'Text' }" v-for="item in doctorService"
						:key="item.name" v-if="item.open == 1" @click="gotoManagementList(item)">
						<view class="icon">
							<image :src="item.icon" mode="widthFix"></image>
						</view>
						<view class="service_text">
							<view class="text_title">
								<view class="title">
									{{item.name == 'Text' ? '图文问诊' : item.name == 'Speech' ? '语音问诊' : item.name == 'Video' ? '视频问诊' : 0}}
								</view>
								<view class="price">
									￥ {{item.amount}}/2天
								</view>
							</view>
							<view class="text_subtitle">
								{{item.tips}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>

	</view>
</template>

<script>
	import {
		queryDoctorDetail,
		insertMyFollow,
		cancelMyFollow
	} from '@/api/index.js'
	import {
		getUserInfo
	} from '@/utils/auth.js'
	export default {
		data() {
			return {
				id: 0,
				type: '',
				typeTabs: [{
					name: '普通问诊',
					value: 1
				}, {
					name: '专家问诊',
					value: 2
				}],
				chooseItem: {},
				chooseTab: {},
				doctorDetail: {},
				doctorService: [],
			}
		},
		onLoad(options) {
			let consultWay = options.consultWay || '1'
			this.chooseTab = this.typeTabs.filter(item => {
				if (item.value == consultWay) return item
			})[0]
			this.type = options.type || ''
			this.id = options.doctorId
			this.queryDoctorDetail(this.id || 0)
		},
		methods: {
			getTab(item) {
				this.chooseTab = item
				this.chooseItem = {}
				this.doctorDetail = {}
				this.doctorService = []
				this.queryDoctorDetail(this.id)
			},
			// 关注
			insertMyFollow() {
				if (!getUserInfo()) return
				if (this.doctorDetail.followStatus == 0) {
					insertMyFollow({
						patientId: getUserInfo().id,
						doctorId: this.doctorDetail.id,
					}).then(res => {
						this.queryDoctorDetail(this.doctorDetail.id)
					}).then(() => {
						uni.showToast({
							icon: 'none',
							title: '成功关注',
						})
					}).catch(err => {
						console.log(err)
					})
				} else {
					cancelMyFollow({
						doctorId: this.doctorDetail.id
					}).then(res => {
						this.queryDoctorDetail(this.doctorDetail.id)
					}).then(() => {
						uni.showToast({
							icon: 'none',
							title: '取消成功',
						})
					}).catch(err => {
						console.log(err)
					})
				}
			},
			queryDoctorDetail(doctorId) {
				if (!doctorId) return
				queryDoctorDetail({
					doctorId,
					patientId: getUserInfo().id,
					consultWay: this.chooseTab.value
				}).then(res => {
					this.doctorDetail = res.data
					// let doctorLevel = this.doctorDetail && this.doctorDetail.consultWay.split(',')
					if (this.chooseTab.value == 1) {
						this.doctorService = [{
							name: 'Text',
							icon: '../../static/icon/doctor/photo-icon-w.png',
							tips: '图文问诊有效期两天且可进行多次图文问诊',
							open: this.doctorDetail.doctorSettingVo.ordinaryText || 0,
							amount: this.doctorDetail.doctorSettingVo.ordinaryTextAmount || 0,
							platform: this.doctorDetail.doctorSettingVo.pictureTextAmount || 0
						}, {
							name: 'Speech',
							icon: '../../static/icon/doctor/phone-icon-w.png',
							tips: '语音问诊有效期两天，方便又快捷',
							open: this.doctorDetail.doctorSettingVo.ordinarySpeech || 0,
							amount: this.doctorDetail.doctorSettingVo.ordinarySpeechAmount || 0,
							platform: this.doctorDetail.doctorSettingVo.speechPlatform || 0
						}, {
							name: 'Video',
							icon: '../../static/icon/doctor/video-icon-w.png',
							tips: '视频问诊有效期两天，和医生线上面对面交流',
							open: this.doctorDetail.doctorSettingVo.ordinaryVideo || 0,
							amount: this.doctorDetail.doctorSettingVo.ordinaryVideoAmount || 0,
							platform: this.doctorDetail.doctorSettingVo.videoPlatform || 0
						}]
					} else if (this.chooseTab.value == 2) {
						this.doctorService = [{
							name: 'Text',
							icon: '../../static/icon/doctor/photo-icon-w.png',
							tips: '图文问诊有效期两天且可进行多次图文问诊',
							open: this.doctorDetail.doctorSettingVo.expertText || 0,
							amount: this.doctorDetail.doctorSettingVo.expertTextAmount || 0,
							platform: this.doctorDetail.doctorSettingVo.pictureTextAmount || 0
						}, {
							name: 'Speech',
							icon: '../../static/icon/doctor/phone-icon-w.png',
							tips: '语音问诊有效期两天，方便又快捷',
							open: this.doctorDetail.doctorSettingVo.expertSpeech || 0,
							amount: this.doctorDetail.doctorSettingVo.expertSpeechAmount || 0,
							platform: this.doctorDetail.doctorSettingVo.speechPlatform || 0
						}, {
							name: 'Video',
							icon: '../../static/icon/doctor/video-icon-w.png',
							tips: '视频问诊有效期两天，和医生线上面对面交流',
							open: this.doctorDetail.doctorSettingVo.expertVideo || 0,
							amount: this.doctorDetail.doctorSettingVo.expertVideoAmount || 0,
							platform: this.doctorDetail.doctorSettingVo.videoPlatform
						}]
					}
				}).catch((err) => {})
			},
			gotoManagementList(item) {
				this.chooseItem = item.name
				let consultationAmount = item.amount + item.platform
				let consultationMethod = item.name == 'Text' ? 1 : item.name == 'Speech' ? 2 : item.name == 'Video' ? 3 : 0
				let outpatientInfoCreate = {
					doctorId: this.doctorDetail.id,
					consultationSource: this.chooseItem.value,
					consultationMethod: consultationMethod,
					consultationAmount: consultationAmount,
					titleId: this.doctorDetail.titleId,
					departId: this.doctorDetail.departId
				}
				uni.navigateTo({
					url: `/pagesCommon/patient/managementList?outpatientInfoCreate=${JSON.stringify(outpatientInfoCreate)}`
				})
			},
			moreDetailsShow() {
				this.$refs.moreDetails.open()
			},
			moreDetailsClose() {
				this.$refs.moreDetails.close()
			},
			moreServiceShow() {
				this.$refs.moreService.open()
			},
			moreServiceClose() {
				this.$refs.moreService.close()
			},
			dateChange(e) {
				let info = {
					appointTimes: `${e.detail.value}T00:00:00`,
					doctorId: this.doctorDetail.id,
					departId: this.doctorDetail.departId,
					titleId: this.doctorDetail.titleId,
					employHospital: this.doctorDetail.employmentHospital
				}
				uni.navigateTo({
					url: `/pagesCommon/patient/managementList?outpatientInfoCreate=${JSON.stringify(info)}`
				})
			},
			gotoPage(url) {
				uni.navigateTo({
					url
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.doctor_details_page {
		.btns {
			margin: 60rpx auto;
			padding: 40rpx 0;
		}

		.doctor_info {
			font-size: 24rpx;
			color: #666666;
			display: flex;
			align-items: center;
			margin-bottom: 10rpx;

			.info_text {
				margin-left: 30rpx;

				.doctor_info_self,
				.doctor_info_hospitoal {
					display: flex;
					align-items: flex-end;

					&>view {
						margin-right: 20rpx;
					}
				}

				.doctor_info_hospitoal {
					margin-top: 20rpx;
					align-items: center;
					font-size: 26rpx;
				}

				.text_name {
					font-weight: bold;
					font-size: 32rpx;
					color: #333333;
				}

				.info_tips {
					padding: 6rpx 10rpx;
					border-radius: 10rpx;
					font-size: 22rpx;

					&.green {
						color: #23CC88;
						background-color: #DEF7ED;
					}

					&.yellow {
						color: #F1AE34;
						background-color: #FDF3E1;
					}
				}
			}

			.info_avatar {
				width: 120rpx;
				height: 120rpx;
				border-radius: 100%;
				overflow: hidden;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.info_star {
				margin: 0 auto;
				padding: 20rpx 50rpx;
				font-size: 22rpx;
				color: #FFF;
				display: flex;
				align-items: center;
				justify-content: center;

				.icon {
					margin-right: 10rpx;
					width: 28rpx;
					height: 28rpx;
					line-height: 28rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}
		}

		.doctor_capacity {
			position: relative;
			margin-top: 60rpx;
			margin-bottom: 30rpx;
			font-size: 28rpx;
			line-height: 50rpx;

			.text {
				color: #7A5530;
				display: inline-block;
			}

			.content {
				color: #666666;
				word-wrap: break-word;
			}

			.more {
				position: absolute;
				right: 0;
				bottom: 0;
				color: #4070FE;
				background-color: #f6f8fa;
			}
		}

		.doctor_contact {
			.type_list {
				display: flex;
				align-items: center;
				overflow-y: hidden;
				overflow-x: auto;
				padding-bottom: 30rpx;

				&::-webkit-scrollbar {
					display: none !important;
				}

				.type {
					flex: 0 0 150rpx;
					font-size: 32rpx;
					color: #999;

					&.active {
						position: relative;
						font-weight: bold;
						color: #333333;

						&::after {
							content: "";
							position: absolute;
							left: 44%;
							bottom: -10rpx;
							transform: translate(-50%, -50%);
							width: 40%;
							height: 8rpx;
							border-radius: 100rpx;
							background-color: #3C6DFE;
							animation: fillWidth 0.25s ease;
							animation-fill-mode: forwards;
						}
					}
				}
			}

			.doctor_total {
				display: flex;
				align-items: center;

				.total_item {
					position: relative;
					margin-right: 50rpx;
					font-weight: 500;
					font-size: 22rpx;
					color: rgba(153, 153, 153, 0.8);

					&:not(:last-child)::after {
						content: '';
						position: absolute;
						transform: translate(-50%, -50%);
						top: 50%;
						right: -25rpx;
						width: 1px;
						height: 80%;
						background-color: #EEEEEE;
					}

					.total {
						display: inline-block;
						margin-left: 10rpx;
						font-weight: bold;
						font-size: 26rpx;
						color: #FB5544;
					}
				}
			}

			.contact_list {
				padding-top: 40rpx;
				padding-bottom: 50rpx;
				overflow-x: auto;
				display: flex;
				align-items: stretch;

				.contact_item {
					flex: 0 0 30%;
					padding: 30rpx 0;
					margin-left: 15rpx;
					border-radius: 20rpx;
					display: flex;
					flex-direction: column;
					align-items: center;
					box-sizing: border-box;

					&.ordinary {
						background-color: #F3F8FF;

						&.active {
							border: 1px solid #3B6CFE;

							&::before {
								border-top-color: #3B6CFE;
							}

							&::after {
								border-top-color: #F3F8FF;
							}
						}

						.icon {
							background: linear-gradient(65deg, #3B6CFE 0%, #6c90fc 100%);
						}
					}

					&.expert {
						background-color: #FEF9F1;

						&.active {
							border: 1px solid #EECD89;

							&::before {
								border-top-color: #EECD89;
							}

							&::after {
								border-top-color: #FEF9F1;
							}
						}

						.icon {
							background: linear-gradient(65deg, #E2BF7D 0%, #F8DA95 100%);
						}
					}

					&:first-child {
						margin: 0;
					}

					&.active {
						position: relative;

						&::before {
							content: '';
							position: absolute;
							left: 50%;
							top: 100%;
							transform: translateX(-50%);
							box-sizing: border-box;
							border: 23rpx solid transparent;
						}

						&::after {
							content: '';
							position: absolute;
							left: 50%;
							top: 100%;
							transform: translateX(-50%);
							box-sizing: border-box;
							border: 20rpx solid transparent;
						}
					}

					.icon {
						width: 70rpx;
						height: 70rpx;

						border-radius: 100%;
						display: flex;
						align-items: center;
						justify-content: center;

						image {
							width: 40%;
							height: 40%;
						}
					}

					.title {
						margin: 20rpx 0;
						font-weight: bold;
						font-size: 28rpx;
					}

					.price {
						font-weight: bold;
						font-size: 32rpx;
						color: #FB5544;
					}
				}
			}

			.contact_tips {
				margin: 10rpx;

				.tips_title {
					font-size: 28rpx;
					color: #333333;
					line-height: 40rpx;
				}

				.tips_list {
					.tips_item {
						position: relative;
						margin-left: 20rpx;
						font-size: 26rpx;
						color: #666666;
						line-height: 50rpx;

						&::after {
							content: '';
							position: absolute;
							left: -12rpx;
							top: 50%;
							transform: translate(-50%, -50%);
							width: 8rpx;
							height: 8rpx;
							border-radius: 100%;
							background-color: #666666;
						}
					}
				}
			}
		}

		.doctor_team {
			margin-top: 30rpx;

			.team_list {
				width: 100%;
				overflow-x: auto;
				display: flex;
				align-items: center;

				.team_item {
					flex: 0 0 20%;
					box-sizing: border-box;
					padding: 0 20rpx;
					text-align: center;
					font-size: 24rpx;
					color: #999999;

					.item_avatar {
						margin: 0 auto;
						width: 100rpx;
						height: 100rpx;
						border-radius: 100%;
						overflow: hidden;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.item_title {
						margin: 10rpx 0;
						font-size: 28rpx;
						color: #333333;
					}
				}

			}
		}

		.doctor_evaluate {
			margin-top: 30rpx;

			.evaluate_type {
				margin: 30rpx 0;
				display: flex;
				flex-wrap: wrap;
				align-items: center;

				.evaluate_type_item {
					margin-right: 20rpx;
					padding: 8rpx 10rpx;
					border-radius: 10rpx;
					background-color: #F5F5F5;
					font-size: 24rpx;
					color: #999999;

					&.active {
						box-sizing: border-box;
						border: 1px solid #3B6CFE;
						color: #3B6CFE;
					}
				}
			}

			.evaluate_list {
				.evaluate_item {
					padding: 30rpx 0;
					border-bottom: 1px solid #eee;

					&:last-child {
						border: none;
					}

					.evaluate_info {
						display: flex;
						align-items: center;
						justify-content: space-between;

						.info_user {
							display: flex;
							align-items: center;

							>view {
								margin-right: 15rpx;
							}

							.user_avatar {
								width: 60rpx;
								height: 60rpx;

								image {
									width: 100%;
									height: 100%;
								}
							}

							.user_name {
								font-size: 30rpx;
								color: #333333;
							}

							.user_type {
								padding: 6rpx 10rpx;
								border-radius: 10rpx;
								font-size: 22rpx;

								&.blue {
									color: #3B6CFE;
									background-color: #F3F8FF;
								}

								&.green {
									color: #23CC88;
									background-color: #DEF7ED;
								}

								&.yellow {
									color: #F1AE34;
									background-color: #FDF3E1;
								}
							}
						}

						.info_date {
							font-size: 22rpx;
							color: #999999;
						}
					}

					.evaluate_star {
						padding: 20rpx 0;
						display: flex;
						align-items: center;

						.star {
							padding: 0 10rpx;
							width: 25rpx;
							height: 25rpx;
							line-height: 25rpx;

							image {
								width: 100%;
								height: 100%;
							}
						}

						.total {
							font-size: 24rpx;
							color: #F1AE34;
						}
					}

					.evaluate_content {
						font-size: 26rpx;
						color: #333333;
						line-height: 50rpx;
					}
				}
			}
		}

		.container {
			position: relative;
			padding: 20rpx;
			height: 80vh;
			box-sizing: border-box;
			border-radius: 40rpx 40rpx 0 0;
			background: #fff;

			&.background_linear_gradient {
				background: linear-gradient(45deg, #ffffff 0%, #D0DCFF 100%);
			}

			.close_icon {
				position: absolute;
				right: 20rpx;
				top: 40rpx;
				transform: translate(-50%, -50%);
			}

			.content {
				.popup_title {
					text-align: center;
					font-weight: bold;
					font-size: 36rpx;
				}

				.doctor_info {
					margin: 30rpx auto;
					font-size: 26rpx;
					color: #999999;
					display: flex;
					justify-content: center;

					.blue {
						color: #3B6CFE;
					}
				}

				.details_item {
					padding: 30rpx;

					.item_title {
						position: relative;
						font-weight: bold;
						font-size: 28rpx;

						&::after {
							content: "";
							position: absolute;
							left: -50rpx;
							top: 50%;
							transform: translate(-50%, -50%);
							width: 16rpx;
							height: 100%;
							background: #3B6CFE;
							border-radius: 10rpx;
						}
					}

					.item_content {
						padding: 30rpx 0;
						font-size: 26rpx;
						line-height: 40rpx;
						color: #999999;
					}
				}

				.more_service_item {
					margin: 30rpx 0;
					display: flex;
					align-items: center;
					padding: 30rpx 20rpx;
					border-radius: 20rpx;
					overflow: hidden;
					background-color: #FFF;

					.icon {
						width: 80rpx;
						height: 80rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						border-radius: 100%;
						background: linear-gradient(65deg, #3B6CFE 0%, #6c90fc 100%);

						image {
							width: 40%;
							height: 40%;
						}
					}

					.service_text {
						margin-left: 20rpx;

						.text_title {
							display: flex;
							align-items: center;

							.title {
								font-weight: bold;
								font-size: 28rpx;
								color: #333333;
							}

							.price {
								margin-left: 20rpx;
								font-weight: bold;
								font-size: 32rpx;
								color: #FB5544;
							}
						}

						.text_subtitle {
							margin-top: 10rpx;
							font-size: 24rpx;
							color: #666666;
						}

					}
				}
			}
		}
	}
</style>